let path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {
    CleanWebpackPlugin
} = require('clean-webpack-plugin');

module.exports={
    mode:'development',
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        path:path.join(__dirname,'dist')
    },
    module:{
        rules:[
            {
                test: /\.less$/,
                use: ['style-loader',{loader:MiniCssExtractPlugin.loader,options: {
                    esModule: false,
                  },}, 'css-loader', 'less-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', {loader:MiniCssExtractPlugin.loader,options: {
                    esModule: false,
                  },}, 'css-loader']
            },
            {
                test: /\.(ttf|ttf2|woff|woff2|eot|svg)$/,
                use: [{
                    loader: "url-loader"  // 图片路劲
                }]
            },
            {
                test: /\.js$/,
                // exclude：排除指定目录不需要打包处理
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title: "vue3webpack5",
            template: "./public/index.html",
        }),
        new CleanWebpackPlugin(),//每次成功重建后删除 webpack目录中的所有文件
        new MiniCssExtractPlugin({
            // 每次打包重命名资源，可以防止客户端缓存
            filename: "[name]-[hash:8].css",
        })
    ]
}